<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-row label {
				width: 90px;
				
				padding: 10px 0 10px 15px;
			
			}
			.mui-input-row label~input {
				float: left !important;
				
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-input-row label,.mui-input-row label~input,.mui-input-row label~input~button, .mui-input-row label~select, .mui-input-row label~textarea{
				margin-top: 4px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">找回密码</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				
				<div class="mui-input-row">
					<label>手机号</label>
					<input id='phone' type="text" class="mui-input-clear mui-input" placeholder="请输入账号" style="width:130px ;" onBlur="checkPhoneNum()" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
					<span id="phoneText" style="color: red;line-height: 40px;" ></span>
				</div>             	
                
				<div class="mui-input-row">
					<label>新密码</label>
					<input id='newPassword' type="password" class="mui-input-password mui-input " placeholder="请输6-13位密码！" style="width:140px ;" onBlur="checkPassword()">
					<span id="passwordText" style="color: red;line-height: 45px;"></span>
				</div>
				<div class="mui-input-row">
					<label>验证码</label>
					<input id='u_code' type="text" class=" mui-input" style="width:160px ;" placeholder="请输入验证码 ">
					<input type="button" id='get_code' class="mui-btn mui-btn-primary mui-btn-outlined"  value="获取" style="width: 100px; text-align: center;"></input>
				</div>
				
    
			</form>
			<div class="mui-content-padded">
				<button id='send' class="mui-btn mui-btn-block mui-btn-primary" onclick="findPassword()">提交</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script>
			mui.init();
		var phoneObj = document.getElementById('phone');
		//验证码
		var phoneNum2="";
		var phoneText = document.getElementById("phoneText");
		var u_code=document.getElementById("u_code");
		var pw = document.getElementById('newPassword'); 
		var passwordText = document.getElementById("passwordText");
		//验证两次输入密码是否相同,是否为空
			function checkPassword() {
				  var reg = /^[A-Za-z0-9]{6,13}$/;   
				if(pw.value != "" ) {
					if(pw.value.match(reg)) {
						passwordText.innerHTML = '';
					}else{
						passwordText.innerHTML = '密码格式不符';
						passwordText.style.color = 'red';
				}
					
				}else{
						passwordText.innerHTML = '密码不能为空';
						passwordText.style.color = 'red';
				}
			}
		
		
		
		
	//验证手机号是否存在	
   function checkPhoneNum(){
           var network = true;
              if(mui.os.plus){
                    mui.plusReady(function () {
                        if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
                            network = false;
                        }
                    });
              }
                    if(phoneObj.value != ""){
                        
		             if (network){ 
					 	var phoneVal=phoneObj.value;  
					         console.log('网络正常,正在发送请求...');
					        
					        	   mui.ajax({
						                type: "post",
						                url: "http://113.71.26.27:8080/tpl/phone/checkPhoneNum",
						                async: true,
						                data: {
						                   loginName: phoneVal
						                },
						                dataType: "json",
						                timeout: 1000,
						                crossDomain:true,
						                success: function(data) {
						                    console.log('响应成功！');
						                    console.log(data);
						                    var sure=JSON.stringify(data);
						                    if(sure=='true'){
						                    	
						                    phoneText.innerHTML = '';	
						                    	
						                    	
						                    }else{
						                     
						                    phoneText.innerHTML = '手机号不存在';
						                   phoneText.style.color ='red';
						                  	 }
						                  	 
				               			 },
						                error: function(xhr, type, errorThrown) {
						                    plus.nativeUI.toast(errorThrown);
						                    //alert(errorThrown);
						                }
			            		});
					        
							  }else{
                        mui.toast("当前网络不给力，请稍后再试...");
                    }
                      
                    }else{
							  	
							  	phoneText.innerHTML = '手机号为空';
							  	 phoneText.style.color ='red';
							  }
  }	
			//手机验证码
				var wait = 60;

				function time(o) {
					if(wait == 0) {
						o.removeAttribute("disabled");
						o.value = "获取";
						wait = 60;
					} else {

						o.setAttribute("disabled", true);
						o.value = "重新发送(" + wait + ")";
						wait--;
						setTimeout(function() {
								time(o)
							},
							1000)
					}
				}
				document.getElementById("get_code").onclick = function() {
					
					var network = true;
				if(mui.os.plus) {
					mui.plusReady(function() {
						if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
							network = false;
						}
					});
				}
				if(phoneObj.value != "") {

					if(network) {
						console.log('网络正常,正在发送请求...');
						
						time(this);
						mui.ajax({
							type: "post",
							url: "http://113.71.26.27:8080/tpl/phone/getPhoneMassage",
							async: true,
							data: {
								loginName: phoneObj.value
							},
							dataType: "json",
							timeout: 10000,
							crossDomain: true,
							success: function(data) {
								var sure = JSON.stringify(data);
								console.log(sure);
								if(sure != 'false') {
									plus.nativeUI.toast('验证码发送成功！', {
										verticalAlign: 'center'
									});
									phoneNum2 = sure;
									console.log(phoneNum2);
								} else {
									plus.nativeUI.toast('验证码发送次数过多！', {
										verticalAlign: 'center'
									});
								}

								

							},
							error: function(xhr, type, errorThrown) {
								plus.nativeUI.toast(errorThrown);
								
							}
						});

					} else {
						mui.toast("当前网络不给力，请稍后再试...");
					}
				} else {
					plus.nativeUI.toast('输入不能为空！', {
						verticalAlign: 'center'
					});

				}
				}
		
		
		//找回密码事件
		
		function findPassword()
		{ 
		
		    	
		    if (phoneObj.value != ""&&pw.value!=""&&u_code.value!=""){ 
		    		if(u_code.value==phoneNum2){//验证码相同
		    			
		     			var network = true;
			              if(mui.os.plus){
			                    mui.plusReady(function () {
			                        if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
			                            network = false;
			                        }
			                    });
			              }
	                    if(network){
	                        console.log('网络正常,正在发送请求...');
		              
					       
					        	//phoneText.innerHTML = '手机格式符合';
					        	   mui.ajax({
						                type: "post",
						                url: "http://113.71.26.27:8080/tpl/phone/findPassword",
						                async: true,
						                data: {
						                   loginName: phoneObj.value,
						                   password:pw.value
						                  
						                },
						                dataType: "json",
						                timeout: 1000,
						                crossDomain:true,
						                success: function(data) {
						                    console.log('响应成功！');
						                    console.log(data);
						                    var sure=JSON.stringify(data);
						                    if(sure=='true'){
						                    	alert('修改成功');
						                    	//mui.init();
						                    	plus.webview.currentWebview().hide();
												plus.webview.open('phoneLogin.html','phoneLogin.html');
						                    	/*mui.openWindow({
												url:'phoneLogin.html',
												id:'phoneLogin.html',
												
												});*/
						                    }else if(sure=='false'){
						                    	alert('手机号不存在');
						                    	phoneText.style.color ='red';
						                    	phoneText.innerHTML = '手机号不存在';
						                    	
						                    }else{
						                    	alert('找回失败');
						                    }
				               			 },
						                error: function(xhr, type, errorThrown) {
						                    plus.nativeUI.toast(errorThrown);
						                }
			            		});
					        
							  
                      
                    }else{
                        mui.toast("当前网络不给力，请稍后再试...");
                    }
			    }else{
			    	
			    	 plus.nativeUI.toast('验证码出错！', {verticalAlign: 'center'}); 
			    }
			        
		    	
			         
			        
		    }else{ 
		        plus.nativeUI.toast('输入不能为空！', {verticalAlign: 'center'}); 
		        
		    } 
		
		}
		</script>
	</body>

</html>